<template>
  <Modal title="学习模式" :isOpen="isOpen" @close="isOpen = false">
    <div class="py-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
      <div
        class="course-card group rounded-lg shadow-xl overflow-hidden h-[10rem] w-[20rem]"
        v-for="(item, index) in model"
        :key="index"
        @click="goStudy(item)"
      >
        <!-- 渐变背景区域 -->
        <div
          :class="[
            'relative overflow-hidden h-full flex items-center justify-center cursor-pointer',
            getRandomColorClass(index),
          ]"
        >
          <!-- 装饰元素 -->
          <div
            class="absolute top-0 right-0 w-24 h-24 rounded-full bg-white/15 -mr-6 -mt-6 transition-transform duration-500 group-hover:scale-125"
          ></div>
          <div
            class="absolute bottom-0 left-0 w-32 h-32 rounded-full bg-white/15 -ml-10 -mb-10 transition-transform duration-500 group-hover:scale-125"
          ></div>

          <div class="z-10 p-6 text-center">
            <h2
              class="text-2xl font-bold text-white text-center drop-shadow-md transition-all duration-300 group-hover:scale-105 group-hover:drop-shadow-xl mb-4"
            >
              {{ item.tilte }}
            </h2>
            <p class="text-sm text-white/90 max-w-xs">{{ item.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </Modal>
</template>
<script setup>
import { getRandomColorClass } from "~/composables/common/helpers";
import { toast } from "vue-sonner";
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false,
  },
  chapterId: {
    type: String,
    default: "",
  },
});
const model = [
  {
    tilte: "中译英模式",
    page: "input",
    type: "chinese_to_english",
    description: "看到中文提示，尝试用英文表达。练习运用所学词汇和语法。",
  },
  {
    tilte: "听写模式",
    page: "input",
    type: "listen_to_write",
    description: "听音频，写出你听到的英文单词，训练听力，掌握单词拼写。",
  },
  {
    tilte: "答题模式",
    page: "choice",
    type: "listen_to_write",
    type: "english_to_chinese",
    description: "4选1模式，选择正确的译文。测试词汇量、正确率、单词掌握水平。",
  },
  {
    tilte: "更多模式",
    type: "review",
    description: "期待您的加入，更多学习模式意见征求中",
  },
];
const goStudy = (item) => {
  if (item.type == "review") {
    toast.error("开发中,敬请期待");
    return;
  }
  const url = `/study/${item.page}-${props.chapterId}?type=` + item.type;
  navigateTo(url);
};
</script>
